<template>
    <div class="container block">
        <div class="header">
            <div class="search">
                <input type="text" placeholder="请输入人员/派遣单位/项目名称" class="input search-input" v-model="searchText"
                    @keydown.enter="search" />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
            <div>
                <button class="btn mg-r-10" @click="$router.push('/advance/setting')">预支配置</button>
                <button class="btn" @click="isEnterprise = true">添加企业</button>
            </div>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%" :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }">
                <el-table-column width="300" prop="serveCompanyName" label="企业名称" />
                <el-table-column prop="contacts" label="负责人" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="contacts" label="身份证采集">
                    <template #default="scope">
                        <div>
                            <el-switch v-model="scope.row.isNeedIdcardPhoto" :active-value="1" :inactive-value="0"
                                @change="handleSwitchChange(scope.row)"></el-switch>
                            <!-- {{ scope.row.isNeedIdcardPhoto ? '已开启' : '未开启' }} -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="pwCount" label="审批流设置">
                    <template #default="scope">
                        <div>
                            {{ scope.row.isNotDefault ? '已设定' : '默认审批流' }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="isOpenAdvance" label="预支配置">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isOpenAdvance" :active-value="1" :inactive-value="0"
                            @change="handleSwitchChange(scope.row)"></el-switch>
                        <!-- 
                        <div :class="{'fc-blue': scope.row.isOpenAdvance}">
                            {{ scope.row.isOpenAdvance ? '已开启' : '未开启' }}
                        </div> -->
                    </template>
                </el-table-column>

                <el-table-column width="150" prop="isShowContacts" label="展示负责人电话">
                    <template #header>
                        <div class="flex flex-ai-c">
                            <span class="mg-r-5">展示负责人电话</span>
                            <el-tooltip class="box-item" effect="dark" content="关闭后，「子弹工作」将不再展示您的联系方式，他人将无法从该平台联系到你。"
                                placement="bottom">
                                <el-icon>
                                    <Warning />
                                </el-icon>
                            </el-tooltip>
                        </div>
                    </template>
                    <template #default="scope">
                        <el-switch v-model="scope.row.isShowContacts" :active-value="1" :inactive-value="0"
                            @change="handleSwitchChange(scope.row)"></el-switch>
                        <!-- <div :class="{'fc-success': scope.row.isShowContacts}">
                            {{ scope.row.isShowContacts ? '展示' : '不展示' }}
                        </div> -->
                    </template>
                </el-table-column>

                <el-table-column label="操作" fixed="right" width="100">
                    <!-- @click="goEnterprise(scope.row.id)"  -->
                    <template #default="scope">
                        <div class="align-items">
                            <el-button class="set-btn set-color-success" size="mini" plain type="success"
                                @click="onIsEditEnterprise(scope.row)">
                                <!-- <el-icon>
                                <EditPen />
                            </el-icon> -->
                                <span class="icon iconfont icon-bianji"></span>
                            </el-button>
                            <el-button class="set-btn set-color" size="mini" plain type="warning"
                                @click="onDeleteCompany(scope.row.id)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                            <!-- <text class="link " @click="onIsEditEnterprise(scope.row)">编辑&nbsp;&nbsp;</text>
                            <text class="link color-red" @click="onDeleteCompany(scope.row.id)">&nbsp;&nbsp;删除</text> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" v-model:currentPage="pageNum" v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="getList">
            </el-pagination>
        </div>
        <popupTeamMember @close="isPopupTeamMember = false" selectType="one" @determine="onAddHead" v-if="isPopupTeamMember"
            dataTitle="添加成员"></popupTeamMember>
        <popupEnterprise @close="isEnterprise = false" @determine="onAddEnterprise" @selectHead="onSelectHead"
            :headList="headList" v-if="isEnterprise" dataTitle="添加企业"></popupEnterprise>

        <popupEnterprise @close="isEditEnterprise = false" :echo="currentItem" @determine="onEditEnterprise"
            @selectHead="onSelectHead" :headList="headList" v-if="isEditEnterprise" dataTitle="编辑企业"></popupEnterprise>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { getEnterpriseList, EnterpriseDto, getAllEnterpriseList, deleteCompany, editCompany, serveCompanyAdvanceCount } from '@/api/enterprise'
import { addBindCompanySupplier } from '@/api/home'
import popupTeamMember from '@/components/popup-team-member.vue'
import popupEnterprise from '@/components/popup-enterprise.vue'
import { confirm } from '@/utils/util'
export default defineComponent({
    name: 'EnterpriseList',
    components: {
        popupTeamMember,
        popupEnterprise
    },
    data() {
        return {
            isEnterprise: false,
            isPopupTeamMember: false,
            tableData: [] as EnterpriseDto[],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            searchText: '',
            searchValue: '',
            headList: [],
            isEditEnterprise: false, // 编辑企业弹窗
            currentItem: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            const result = await getAllEnterpriseList({
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                serveCompanyName: this.searchText
            })
            console.log(result, 'result')
            this.total = result.totalCount
            this.tableData = result.list
        },
        // 选择负责人回调
        onAddHead(event: any) {
            console.log(event, 'event')
            this.headList = event
            console.log(this.headList, 'headList')
            this.isPopupTeamMember = false
        },
        handleSizeChange() {
            this.pageNum = 1
            this.getList()
        },
        goEnterprise(id: number) {
            this.$router.push({
                path: '/enterprise/detail/' + id
            })
        },
        search() {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getList()
        },
        onReset() {
            this.searchText = ''
            this.search()
        },
        // 打开选择负责人弹窗
        onSelectHead() {
            this.isPopupTeamMember = true
        },
        // 打开编辑企业弹窗
        onIsEditEnterprise(item: any) {
            this.currentItem = item
            this.isEditEnterprise = true
        },
        // 确认添加企业回调
        async onAddEnterprise(head: any, enterprise: any, phone: string, switchCard: boolean, isAdvance: any, isPhone: any) {
            console.log(head, enterprise, phone, switchCard)
            // const query = {
            //     area: enterprise.area || '暂无', // 公司位置
            //     contacts: head[0].userName, // 选择的name
            //     contactsId: head[0].userId, // 选择的id
            //     createUserId: 2, // user.userId
            //     creditCode: enterprise.creditCode,
            //     isNeedIdcardPhoto: switchCard ? 1 : 0, // 是否需要照片
            //     phone: phone, // 电话
            //     serveCompanyName: enterprise.name, // 公司名称
            //     isOpenAdvance: isAdvance * 1,
            //     isShowContacts: isPhone * 1
            // }
            addBindCompanySupplier({
                area: enterprise.area || '暂无', // 公司位置
                contacts: head[0].userName, // 选择的name
                contactsId: head[0].userId, // 选择的id
                createUserId: 2, // user.userId
                creditCode: enterprise.creditCode,
                isNeedIdcardPhoto: switchCard ? 1 : 0, // 是否需要照片
                phone: phone, // 电话
                serveCompanyName: enterprise.name, // 公司名称
                isOpenAdvance: isAdvance * 1,
                isShowContacts: isPhone * 1
            }).then(() => {
                this.isEnterprise = false
                this.$message.success('创建成功')
                this.handleSizeChange()
            }).catch(() => {
                this.isEnterprise = true
            })
        },
        // 确认修改回调
        async onEditEnterprise(head: any, enterprise: any, phone: string, switchCard: boolean, isAdvance: any, isPhone: any) {
            console.log(head, enterprise, phone, switchCard, '编辑回调')
            // const query = {
            //     contacts: head[0].userName,
            //     contactsId: head[0].id,
            //     id: enterprise.id,
            //     isNeedIdcardPhoto: switchCard ? 1 : 0,
            //     phone: phone,
            //     isOpenAdvance: isAdvance * 1,
            //     isShowContacts: isPhone * 1
            // }
            // console.log(1111, query);
            // 编辑企业
            editCompany({
                contacts: head[0].userName,
                contactsId: head[0].id ||head[0].userId,
                id: enterprise.id,
                isNeedIdcardPhoto: switchCard ? 1 : 0,
                phone: phone,
                isOpenAdvance: isAdvance * 1,
                isShowContacts: isPhone * 1
            }).then(result => {
                this.isEditEnterprise = false
                console.log(result, 'result')
            }).finally(() => {
                this.search()
            })
        },
        // 删除企业
        async onDeleteCompany(id: string) {
            const res = await serveCompanyAdvanceCount({
                serveCompanyId: id
            }) as any
            let message = '是否确定删除该企业？'
            if (res > 0) {
                message = `监测到该企业下有${res}条预支申请还未处理，删除后系统默认驳回该预支申请单。`
            }
            confirm('提示', message).then(async () => {
                await deleteCompany({
                    id: id
                })
                this.onReset()
            })
        },
        handleSwitchChange(row: any) {
            const headers = [
                {
                    userName: row.contacts,
                    id: row.contactsId
                }
            ]
            const enterprise = {
                id: row.id
            }
            this.onEditEnterprise(headers, enterprise, row.phone, row.isNeedIdcardPhoto, row.isOpenAdvance, row.isShowContacts)
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.set-btn
    padding 6px 8px
.set-color
    color #FF7642
    border-color transparent
    &:hover
        background #FF7642
        border-color transparent
.set-color-success
    color #00D679
    border-color transparent
    &:hover
        color #fff
        background #00D679
        border-color transparent
        .icon
            color #fff
    
</style>
